<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #f2f2f2;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .el-main {
            padding: 0;
        }

        #hd_top {
            height: 30px;
            line-height: 30px;
            background: #fff;
        }

        #hd_top .el-button--text {
            font-size: 13px;
            color: #666;
        }

        #hd_top a {
            font-size: 13px;
        }

        #hd_d1 {
            width: 800px;
            float: left;
            overflow: hidden;
            height: 40px;
            margin: 0 15px auto;
        }

        #hd_d1 ul li a:hover, #d2 a:hover {
            background-color: white;
            color: #D32031;
        }

        #hd_d1 ul li a {
            color: white;
            display: block;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
        }

        #hd_d2 {
            float: right;
        }

        input {
            height: 25px;
            width: 400px;
            margin-left: 18px;
        }

        ul {
            display: block;
        }

        ul li {
            margin: 0;
            list-style: none;
        }

        #hd_d1 ul {
            overflow: hidden;
            float: left;
        }

        #hd_d1 li {
            float: left;
        }

        #hd_d2 li {
            float: left;
        }

        #hd_d2 a {
            height: 30px;
            line-height: 30px;
            padding: 5px 15px !important;
            color: #fff;
            display: block;
            font-size: 12px;
            font-weight: normal;
        }

        #scbar {
            width: 990px;
            overflow: hidden;
            height: 42px;
            line-height: 42px;
            border-top: 1px solid #FFF;
            border-bottom: 1px solid #E9EFF5;
            background: #E8EFF5;
            margin-bottom: 10px;
        }

        .box-card img {
            width: 100%;
        }

        .el-container {
            height: 100%;
        }

        .el-aside {
            font-size: 13px;
            background-color: #E5EDF2;
        }

        .el-main {
            background-color: #fff
        }

        footer {
            margin-top: 15px;
        }

        #ft_top {
            height: 170px;
            width: 900px;
            margin: 0 auto
        }

        #ft_top div {
            padding-top: 30px;
            text-align: center;
            width: 300px;
            float: left;
        }

        #ft_top p {
            margin-bottom: 5px;
        }

        #ft_top h3 {
            margin-bottom: 10px;
        }

        #ft_bottom {
            background-color: #363636;
            height: 120px;
            width: 990px;
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
            font-size: 12px;
        }

        #ft_bottom p {
            margin-bottom: 5px;
        }

        #ft_bottom a, #ft_bottom p {
            color: #FFFFFF;
        }


    </style>
</head>
<body>
<div id="app">
    <header>
        <div id="hd_top">
            <div style="width: 990px; margin: 0 auto">
                <a href="index.html" style="margin-left: 20px">严选车官网</a>
                <el-button type="text" @click="open">收藏本站</el-button>
            </div>
        </div>
        <div style="height:40px; width:100%; background-color: #e14800">
            <div style="width: 990px;margin: 0 auto">
                <div id="hd_d1">
                    <ul>
                        <a href="forumIndex.html" title="严选车社区" style="float:left; margin:-8px 15px 0 0;">
                            <img src="forumImg/logo.png" alt="严选车社区" border="0">
                        </a>
                        <li style="background-color: white">
                            <a href="forumIndex.html" style="color: red">首页</a>
                        </li>
                        <li>
                            <a href="">社区</a>
                        </li>
                        <li>
                            <a href="">积分商城</a>
                        </li>
                        <li>
                            <a href="">车友会群</a>
                        </li>
                        <li>
                            <a href="">每日精选</a>
                        </li>
                        <li>
                            <a href="">问题反馈</a>
                        </li>
                    </ul>
                </div>
                <div id="hd_d2">
                    <ul>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/login.html">登录</a>
                        </li>
                        <li>
                            <a class="a1" style="font-size: 13px" href="/reg.html">注册</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="width:990px;margin: 0 auto">
            <div id="scbar">
                <input type="text" placeholder="请输入搜索内容" v-model="search">
                <select id="mySelect" style="height: 30px">
                    <option value="1">文章</option>
                    <option value="2">帖子</option>
                    <option value="3">用户</option>
                </select>
                <el-button icon="el-icon-search" size="small" @click="search()"></el-button>
                <b style="font-size: 15px">热搜</b>
                <a v-for="h in hotSearchArr" :href="h.url"
                   style="font-size: 13px;color: #369;margin-left: 10px">{{h.name}}</a>
            </div>
            <div style="height: 24px">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">
                        <a href="index.html">首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="forumIndex.html">社区</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="">李四</a>
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div style="height: 40px">
            <div style="width:990px; margin: 0 auto">
                <div style="float: left">
                    <el-button type="primary" @click="">发帖</el-button>
                </div>
                <div style="float: right">
                    <el-button type="primary" v-on:click="location.href = 'forumIndex.html'">返回社区</el-button>
                </div>
            </div>
        </div>
    </header>
    <main style="margin-top: 10px">
        <div style="width: 990px; margin: 0 auto; border: 1px solid #CDCDCD">
            <header style="height: 40px">
                <el-container>
                    <el-aside width="160px">
                        <div style="text-align: center; margin-top: 10px">
                            <span>查看：<span style="color: #ff6b23">{{article.readCount}}</span></span>
                            <el-divider direction="vertical"></el-divider>
                            <span>回复：<span style="color: #ff6b23">{{article.replyCount}}</span></span>
                        </div>
                    </el-aside>
                    <el-main>
                        <div style="width: 90%; margin: 0 auto">
                            <p style="margin-top: 10px"><b>{{article.title}}</b></p>
                        </div>
                    </el-main>
                </el-container>
            </header>
            <hr>
            <main>
                <el-container>
                    <el-aside width="160px">
                        <div style="width: 120px; margin: 20px auto;">
                            <img :src="user.img" alt="" width="120px" height="120px">
                            <p style="color: #ff6b23; margin-top: 5px">{{user.name}}</p>
                            <p style="margin-top: 5px">{{user.level}}</p>
                        </div>
                    </el-aside>
                    <el-main>
                        <div style="width: 90%; margin: 20px auto; font-size: 15px">
                            <p>发表于 {{article.created}}</p>
                        </div>
                    </el-main>
                </el-container>
            </main>

        </div>
    </main>
    <footer>
        <div style="background: #DCDADB">
            <div id="ft_top">
                <div>
                    <h3>关于我们</h3>
                    <p>
                        <el-link href="index.html" icon="el-icon-link">网站首页</el-link>
                        <el-link href="introduction.html" icon="el-icon-link">关于我们</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">加入我们</el-link>
                        <el-link href="" icon="el-icon-link">联系我们</el-link>
                    </p>
                </div>
                <div>
                    <h3>联系我们</h3>
                    <p>
                        <el-link href="" icon="el-icon-link">网站:http://localhost:8080/index.html</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">微博:</el-link>
                    </p>
                    <p>
                        <el-link href="" icon="el-icon-link">客服电话:</el-link>
                    </p>
                </div>
                <div>
                    <h3>关注我们</h3>
                </div>
            </div>
        </div>
        <div style="background-color: #363636">
            <div id="ft_bottom">
                <p>
                    <a href="">手机版</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">个人收藏</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">小黑屋</a>
                    <el-divider direction="vertical"></el-divider>
                    <a href="">严选车-放心二手车-爱车人懂车人聚集地</a>
                </p>
                <p>京ICP备 14030440号</p>
                <p>地址：北京市朝阳区北苑东路中国铁建广场B座19-21层 电话: 400-670-1080</p>
            </div>
        </div>
    </footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                search: "", //输入框内容
                hotSearchArr: [{name: '严选车社区', url: 'forumIndex.html'}, {name: '严选车', url: 'index.html'},
                    {name: '二手车', url: ''}, {name: '车友会', url: ''}], //热搜
                user: {
                    name: '李四', img: 'forumImg/celebrity2.jpg',
                    level: '[LV.9]社区顶级粉丝'
                },
                article: {
                    title: "选择恐惧症？二手车买自吸还是增压？",
                    author: "李四",
                    created: "2023-1-30 16:33",
                    readCount: 20,
                    replyCount: 20,
                    content: ''
                } //文章
            }
        },
        methods: {
            open() {
                this.$alert('请按 Ctrl+D 键添加到收藏夹', '提示信息', {
                    confirmButtonText: '确定'
                })
            },
            search() {
                // location.href = "/forumResult.html?search="+v.search;
            }
        }

    })
</script>
</html>